<template>
  <Panel class="je-admin-layout-main">
    <PanelItem :hidden="isSingleLayout" region="top">
      <TopMain v-if="isMainLayout || isHomeLayout" />
      <TopApp v-else />
    </PanelItem>
    <PanelItem
      :hidden="!isMainLayout"
      region="left"
      size="260"
      :min-size="64"
      :max-size="400"
      split
      drawer
    >
      <SiderMenu />
    </PanelItem>
    <PanelItem :hidden="!isMainLayout" region="tbar">
      <Navigation />
    </PanelItem>
    <PanelItem>
      <PageRouter layout="main" />
    </PanelItem>
  </Panel>
</template>
<script>
  import { defineComponent } from 'vue';
  import { Panel } from '@jecloud/ui';
  import TopMain from '@/views/menus/top/top-main.vue';
  import TopApp from '@/views/menus/top/top-app.vue';
  import SiderMenu from '@/views/menus/sider/index.vue';
  import Navigation from '@/views/menus/navigation/index.vue';
  import PageRouter from './page-router.vue';
  import { LayoutType } from '@/data/enum/layout';
  import { computed } from 'vue';
  import { useRoute } from 'vue-router';
  export default defineComponent({
    name: 'AdminLayoutMain',
    components: {
      Panel,
      PanelItem: Panel.Item,
      TopMain,
      TopApp,
      SiderMenu,
      Navigation,
      PageRouter,
    },
    setup() {
      const route = useRoute();
      const isAppLayout = computed(() => route.params.layout === LayoutType.APP);
      const isSingleLayout = computed(() => route.params.layout === LayoutType.SINGLE);
      const isHomeLayout = computed(() => route.params.layout === LayoutType.HOME);
      const isMainLayout = computed(() => route.params.layout === LayoutType.MAIN);
      return { isAppLayout, isSingleLayout, isHomeLayout, isMainLayout };
    },
  });
</script>
<style></style>
